<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="40%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
  >
    <template #footer>
      <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
      <!-- <t-tooltip content="提交后不可再编辑会进入审批流程"> -->
        <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
      <!-- </t-tooltip> -->
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="left"
        labelWidth="210px"
        :data="formData"
        ref="form"
        :rules="edit ? rules : {}"
        class="dialog-form"
      >
        <t-form-item label="一、交通运输从业人员数量" name="jtyscy">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-model="formData.jtyscy" theme="normal" placeholder="请输入交通运输从业人员数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyscy}} 人</span>
        </t-form-item>
        <t-form-item label="其中：学士及以上学位" name="jtyscyssys" class="t1">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyscyssys" theme="normal" placeholder="请输入学士及以上学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyscyssys}} 人</span>
        </t-form-item>
        <t-form-item label="二、交通运输科技活动人员数量" name="jtyskjhd">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskjhd" theme="normal" placeholder="请输入交通运输科技活动人员数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskjhd}} 人</span>
        </t-form-item>
        <t-form-item label="其中：博士学位" name="jtyskjhdbs" class="t1">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskjhdbs" theme="normal" placeholder="请输入博士学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskjhdbs}} 人</span>
        </t-form-item>
        <t-form-item label="  硕士学位" name="jtyskjhdss" class="t4">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskjhdss" theme="normal" placeholder="请输入硕士学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskjhdss}} 人</span>
        </t-form-item>
        <t-form-item label="  学士学位" name="jtyskjhdxs" class="t4">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskjhdxs" theme="normal" placeholder="请输入学士学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskjhdxs}} 人</span>
        </t-form-item>
        <t-form-item label="其中：高级职称" name="jtyskjhdgj" class="t1">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskjhdgj" theme="normal" placeholder="请输入高级职称数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskjhdgj}} 人</span>
        </t-form-item>
        <t-form-item label="  中级职称" name="jtyskjhdzj" class="t4">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskjhdzj" theme="normal" placeholder="请输入中级职称数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskjhdzj}} 人</span>
        </t-form-item>
        <t-form-item label="三、交通运输开发人员数量" name="jtyskf">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskf" theme="normal" placeholder="请输入交通运输开发人员数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskf}} 人</span>
        </t-form-item>
        <t-form-item label="其中：博士学位" name="jtyskfbs" class="t1">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskfbs" theme="normal" placeholder="请输入博士学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskfbs}} 人</span>
        </t-form-item>
        <t-form-item label="  硕士学位" name="jtyskfss" class="t4">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskfss" theme="normal" placeholder="请输入硕士学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskfss}} 人</span>
        </t-form-item>
        <t-form-item label="  学士学位" name="jtyskfxs" class="t4">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskfxs" theme="normal" placeholder="请输入学士学位数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskfxs}} 人</span>
        </t-form-item>
        <t-form-item label="其中：高级职称" name="jtyskfgj" class="t1">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskfgj" theme="normal" placeholder="请输入高级职称数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskfgj}} 人</span>
        </t-form-item>
        <t-form-item label="  中级职称" name="jtyskfzj" class="t4">
          <t-input-adornment v-if="edit" append="人">
            <t-input-number v-if="edit" v-model="formData.jtyskfzj" theme="normal" placeholder="请输入中级职称数量"></t-input-number>
          </t-input-adornment>
          <span v-else>{{formData.jtyskfzj}} 人</span>
        </t-form-item>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
export default {
  name: 'TabPersonnelSizeForm',
  props: {
    edit: { type: Boolean, default: true },
    infoId: { type: Number, default: -1 }
  },
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        jtyscy: undefined,
        jtyscyssys: undefined,
        jtyskjhd: undefined,
        jtyskjhdbs: undefined,
        jtyskjhdss: undefined,
        jtyskjhdxs: undefined,
        jtyskjhdgj: undefined,
        jtyskjhdzj: undefined,
        jtyskf: undefined,
        jtyskfbs: undefined,
        jtyskfss: undefined,
        jtyskfxs: undefined,
        jtyskfgj: undefined,
        jtyskfzj: undefined,
        approveStatus: '1',
      },
      rules: {
        jtyscy: [{ required: true, message: '交通运输从业人员数量不能为空' },],
        jtyscyssys:[{ required: true, message: '学士及以上学位不能为空' },],
        jtyskjhd: [{ required: true, message: '交通运输科技活动人员数量不能为空' },],
        jtyskjhdbs: [{ required: true, message: '博士学位数量不能为空' },],
        jtyskjhdss: [{ required: true, message: '硕士学位数量不能为空' },],
        jtyskjhdxs: [{ required: true, message: '学士学位数量不能为空' },],
        jtyskjhdgj: [{ required: true, message: '高级职称数量不能为空' },],
        jtyskjhdzj: [{ required: true, message: '中级职称数量不能为空' },],
        jtyskf:[{ required: true, message: '交通运输开发人员数量不能为空' },],
        jtyskfbs: [{ required: true, message: '博士学位数量不能为空' },],
        jtyskfss: [{ required: true, message: '硕士学位数量不能为空' },],
        jtyskfxs: [{ required: true, message: '学士学位数量不能为空' },],
        jtyskfgj: [{ required: true, message: '高级职称数量不能为空' },],
        jtyskfzj: [{ required: true, message: '中级职称数量不能为空' },],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    },
    labelWidth() {
      return '120px'
    }
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.formLoading = false
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 查看和修改时获取详情
    getDetail() {
      this.$api.kjtjdc.table.personInfo.getInfoById(this.infoId).then(({data}) => {
        this.formData = data;
        this.formLoading = false
      }).catch(e => {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      });
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      this.$api.kjtjdc.table.personInfo[action](this.formData).then(() => {
        this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
        this.btnLoading = false
        this.$emit('update:visible', false);
        this.$emit('reload');
      }).catch(e => {
        this.$message.error(e)
        this.btnLoading = false
      })
    },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 8px 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.t-form__item {
  margin: 0 35px 0 0;
}
.t-row {
  margin-bottom: 20px;
}
// .dialog-form ::v-deep.t-form__item .t-form__label {
//   font-weight: 600;
//   color: black;
// }
// .dialog-form ::v-deep.t-form__item .t-form__controls .t-form__controls-content span {
//   border-bottom: 2px solid #000;
// }
.dialog-form ::v-deep.t-form__item {
  border-top: 1px solid #333;
  box-sizing: border-box;
  margin-bottom: 0px;
}
.dialog-form ::v-deep.t-form__item:last-of-type {
  border-bottom: 1px solid #333;
}
.dialog-form ::v-deep.t-form__item .t-form__label {
  border-right: 1px solid #333;
}
.dialog-form ::v-deep.t-form__item .t-form__controls {
  padding-left: 10px;
}
.dialog-form .t1::v-deep.t-form__item .t-form__label {
  padding-left: 20px;
}
.dialog-form .t2::v-deep.t-form__item .t-form__label {
  padding-left: 40px;
}
.dialog-form .t3::v-deep.t-form__item .t-form__label {
  padding-left: 60px;
}
.dialog-form .t4::v-deep.t-form__item .t-form__label {
  padding-left: 60px;
}
</style>
